<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box"></div>
    <script>
      // vue2 --- defineProperty --- vue3 用proxy
      // 1.通过`Object.defineProperty`来实现监听数据的改变和读取（属性中的getter和setter方法）
      //    **`实现数据劫持`**
      // 2.`观察者模式（发布者-订阅者）`

      //   当数据发生改变通过发布者订阅者模式来进行通知 进行界面刷新
      var obj = { title: "zhangsan" };

      //   修改了title的值 页面立刻会发生变化 ----通过他Object.defineProperty 监听数据的变量

      //   观察者模式（发布者-订阅者） --通知了页面 更新dom

      Object.defineProperty(obj, "title", {
        get() {},
        set(v) {
          console.log("修改了title属性的值");
          //   通过页面更新
          document.querySelector("#box").innerHTML = v;
        },
      });

      //   obj.title = "aaa";
    </script>
  </body>
</html>
